<template>
    <el-dialog
        title="同步商家"
        :visible.sync="showValue"
        append-to-body
        :close-on-click-modal="false"
        width="700px"
        :before-close="clearData"
    >
        <div class="wrap">
            <el-form ref="form" :model="form" size="small" label-width="120px">
                <el-form-item label="商家">
                    <el-transfer
                        v-model="companyIdList"
                        :data="companyList"
                        filterable
                        :titles="['未选择', '已选择']"
                        :props="{ label: 'companyName', key: 'companyId' }"
                    ></el-transfer>
                </el-form-item>
                <el-form-item label="系统">
                    <el-checkbox-group v-model="businessTypes">
                        <el-checkbox
                            v-for="(item, index) in systemList"
                            :key="index"
                            :label="item.key"
                            >{{ item.value }}</el-checkbox
                        >
                    </el-checkbox-group>
                </el-form-item>
            </el-form>
        </div>
        <span slot="footer">
            <el-button size="small" @click="clearData">取 消</el-button>
            <el-button
                type="primary"
                size="small"
                :loading="loading"
                @click="save"
                >确 定</el-button
            >
        </span>
    </el-dialog>
</template>

<script>
export default {
    props: {
        value: Boolean,
        type: Number,
        managementType: Number
    },
    data () {
        return {
            companyIdList: [],
            companyList: [],
            businessTypes: [],
            systemList: [],
            loading: false,
            showValue: false,
            form: {
                icon: '',
                menuName: '',
                menuState: 1,
                menucode: '',
                parentMencode: '',
                sort: ''
            }
        }
    },
    watch: {
        value (val) {
            console.log(val)
            this.showValue = val
        },
        showValue (val) {
            if (val) {
                this.getCompanyByManagementType()
                this.getBusinessTypeDict()
            }
            this.$emit('update:value', val)
        }
    },
    methods: {
        // 清空数据
        clearData () {
            this.companyIdList = []
            this.businessTypes = []
            this.loading = false
            this.showValue = false
        },
        async getCompanyByManagementType () {
            const res = await this.$http.post(this.$store.state.IP + '/system/company/getCompanyByManagementType', {
                data: {
                    managementType: this.managementType,
                    type: this.type
                }
            })
            if (res.data.ret === '0') {
                this.companyList = res.data.data
            }
        },
        async getBusinessTypeDict () {
            const res = await this.$http.post(this.$store.state.IP + '/system/company/getBusinessTypeDict', {
            })
            if (res.data.ret === '0') {
                this.systemList = res.data.data
            }
        },
        // 保存表单
        save () {
            this.$refs.form.validate(async (valid) => {
                if (valid) {
                    if (this.companyIdList.length === 0) {
                        this.$message({
                            message: '请先选择要同步的商家',
                            type: 'warning'
                        })
                        return
                    }
                    this.loading = true
                    const res = await this.$http.post(this.$store.state.IP + '/system/company/uploadCompanyToOtherSystem', {
                        data: {
                            companyIdList: this.companyIdList,
                            businessTypes: this.businessTypes,
                            managementType: this.managementType,
                            type: this.type
                        }
                    })
                    if (res.data.ret === '0') {
                        this.loading = false
                        this.$message({
                            message: '同步成功',
                            type: 'success'
                        })
                        this.clearData()
                    } else {
                        this.loading = false
                    }
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        }
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.formItem
    width: 220px
</style>